<template>
  <view class="profile-container" v-if="userData">
    <!-- 顶部信息区 -->
    <view class="profile-header" style="padding-bottom: 0; ">
      <!-- 头像区 -->
      <image class="avatar" :src="userData.avatarUrl"></image>
      
      <!-- 右侧信息 -->
      <view class="info-section">
      <view class="top-line">
        <text class="nickname">{{userData.nickName}}</text>
      </view>
      
      <text class="xhs-id">账号：{{userData.userName}}</text>
      <text class="ip-location">IP属地：未知</text>
  
    </view>
  </view>

  <view class="profile-header"
  style="flex-direction: column;">
    <text class="bio-link">{{userData.bio || "这个人很懒，什么都没写"}}</text>
    
    
    
    <!-- 数据统计 -->
    <view class="stats">
    <view class="stat-item">
      <text class="number">{{userData.upCount}}</text>
      <text>获赞</text>
    </view>
    <view class="stat-item">
      <text class="number">{{userData.starCount}}</text>
      <text>被收藏</text>
    </view>
    <view class="stat-item">
      <text class="number">{{notes.length}}</text>
      <text>发布帖子量</text>
    </view>
		
		<!-- 私聊按钮 -->
		<button 
		  class="chat-btn"
		  @click="goToPage(`/pages/message/chat/chat?userId=${userData.userId}&nickName=${userData.nickName}`)"
		>发消息</button>
    </view>
  </view>

  <!-- 内容展示区 -->
  <view class="content-grid">
    <!-- 笔记项 -->
    <view class="note-item" v-for="(item, index) in notes" :key="index"
		@click="goToPage(`/pages/post/post-1/post-1?postId=${encodeURIComponent(item.postId)}`)">
      <image class="note-image" :src="item.image">
        <text class="collect-count">{{item.collectCount}}</text>
      </image>
      <text class="note-title">{{item.title}}</text>
      <view class="note-footer">
        <text class="like-count">{{item.likeCount}}</text>
        <text class="author">{{item.author}}</text>
      </view>
    </view>
  </view>
  
</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '../../../utils/request'
const userData = ref(null)
const notes =ref([])
onLoad(async(options)=>{
	try {
		const userId = options.userId
		const res = await http.get('/users/info', {
			userId
		});
		userData.value = res;
		uni.setNavigationBarTitle({
			title: `${res.nickName} 的个人主页`
		})
		try {
			const data = await http.get('/users/publish_posts', {
				userId
			});
			notes.value = data.data
			console.log(notes.value);
		} catch (e) {
			console.error('获取用户发布的帖子失败:', e);
		}
		
	} catch (e) {
		console.error('获取用户信息失败:', e);
	}
	
})

const goToPage = (url) => {
  if (!url) return
  uni.navigateTo({
    url
  })
}
</script>

<style>
.profile-container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 顶部信息区 */
.profile-header {
  padding: 20px;
  display: flex;
  background: #fff;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 40px;
  margin-right: 15px;
  /* background-color: #ffa047; */
}

.top-line {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  margin-right: 8px;
}

.age {
  color: #666;
  margin-right: 15px;
}

.edit-btn {
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 15px;
  font-size: 12px;
}

.xhs-id {
  color: #666;
  display: block;
  margin: 6px 0;
}

.ip-location {
  color: #999;
  font-size: 12px;
}

.bio-link {
  color: #4a4a4a;
  display: block;
  margin: 0px 0 15px 0;

}

/* 数据统计 */
.stats {
  display: flex;
}

.stat-item {
  margin-right: 25px;
  text-align: center;
}

.number {
  font-size: 16px;
  font-weight: bold;
  display: block;
}

/* 内容网格 */
.content-grid {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.note-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.note-image {
  width: 100%;
  height: 180px;
  position: relative;
}

.collect-count {
  position: absolute;
  right: 8px;
  top: 8px;
  color: #fff;
  font-size: 12px;
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  border-radius: 10px;
}

.note-title {
  display: block;
  padding: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.note-footer {
  display: flex;
  justify-content: space-between;
  padding: 0 8px 8px;
  color: #666;
  font-size: 12px;
}

.like-count::before {
  content: "♥ ";
  color: #FF2442;
}

.login-prompt {
  padding: 20px;
  text-align: center;
  margin-top: 20px;
}

.prompt-text {
  display: block;
  margin-bottom: 15px;
  color: #666;
}

.login-btn {
  display: inline-block;
  color: #FF2442 !important;
  border: 1px solid #FF2442 !important;
  border-radius: 15px !important;
  padding: 2px 12px !important;
  margin: 0 8px !important;
  background: transparent !important;
  line-height: 1.5 !important;
}
</style>
